<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<title>熙康体检系统</title>
		<script src="js/vue.global.js"></script>
		<script src="js/element-plus.full.js"></script>
		<script src="js/element-plus-icons-vue.iife.min.js"></script>
		<link rel="stylesheet" href="css/element-plus-index.css" />
		<link rel="stylesheet" href="css/main.css" />
		<style>
					.col-right {
						/* 设置圆角：：左上，右上，右下，左下  */
						border-radius: 0px 4px 4px 0px;
						height: 100px;
						/* 设置水平居中 */
						text-align: center;
						/* 通过设置行高使其垂直方向居中 */
						line-height: 100px;
						vertical-align: middle;
						/* 设置阴影 */
						box-shadow: 0 1px 1px #c8c9cc;
					}
		
					.col-left {
						/* 设置圆角：左上，右上，右下，左下 */
						border-radius: 4px 0px 0px 4px;
						border-width: 1px solid;
						height: 100px;
						/* 设置水平居中 */
						text-align: center;
						/* 通过设置行高使其垂直方向居中 */
						line-height: 100px;
						vertical-align: middle;
					}
		
					.col-mid {
						/* 设置圆角：：左上，右上，右下，左下  */
						border-radius: 0px 4px 4px 0px;
						height: 220px;
						/* 设置水平居中 */
						text-align: center;
						/* 通过设置行高使其垂直方向居中 */
						line-height: 100px;
						vertical-align: middle;
						/* 设置阴影 */
						box-shadow: 0 1px 1px #c8c9cc;
					}
		
					.col-bottom {
						/* 设置圆角：：左上，右上，右下，左下  */
						border-radius: 0px 4px 4px 0px;
						height: 300px;
						/* 设置水平居中 */
						text-align: center;
						/* 通过设置行高使其垂直方向居中 */
						line-height: 100px;
						vertical-align: middle;
						/* 设置阴影 */
						box-shadow: 0 1px 1px #c8c9cc;
					}
				</style>
	</head>
	<body>
		<div id="app">
					<el-tabs type="border-card">
						<!-- 首页 -->
						<el-tab-pane label="首页">
							<!-- 头部： layout布局 -->
							<el-row :gutter="20">
								<!-- 视图一： 当日新增体检用户 -->
								<el-col :span="4">
									<div class="grid-content ep-bg-purple">
										<!-- 内部布局：layout布局--基础布局 -->
										<el-row>
											<el-col :span="8" class="col-left"
												style="border-color: #478CE9;background-color: #478CE9;">
												<Avatar style="width: 2em; height: 2em;border-color: white;" color="white" />
											</el-col>
											<el-col :span="16" class="col-right">
												<div style="font-size: 60px; font-weight:bold; color: #606266">
													103
												</div>
											</el-col>
										</el-row>
									</div>
								</el-col>
								<!-- 视图二： 当日新增预约用户-->
								<el-col :span="4">
									<div class="grid-content ep-bg-purple">
										<!-- 内部布局：layout布局--基础布局 -->
										<el-row>
											<el-col :span="8" class="col-left"
												style="border-color: #55BA75;background-color: #55BA75;">
												<!-- <el-icon><CirclePlusFilled /></el-icon> -->
												<Promotion style="width: 2em; height: 2em;border-color: white;" color="white" />
											</el-col>
											<el-col :span="16" class="col-right">
												<div style="font-size: 60px; font-weight:bold; color: #606266">
													203
												</div>
											</el-col>
										</el-row>
									</div>
								</el-col>
								<!-- 视图三： 新增-->
								<el-col :span="4">
									<div class="grid-content ep-bg-purple">
										<el-row>
											<el-col :span="8" class="col-left"
												style="border-color: #F39D38;background-color: #F39D38;">
												<Grid style="width: 2em; height: 2em;border-color: white;" color="white" />
											</el-col>
											<el-col :span="16" class="col-right">
												<div style="font-size: 60px; font-weight:bold; color: #606266">
													303
												</div>
											</el-col>
										</el-row>
									</div>
								</el-col>
								<el-col :span="4">
									<div class="grid-content ep-bg-purple">
										<el-row>
											<el-col :span="8" class="col-left"
												style="border-color: #DD4E2A;background-color: #DD4E2A;">
												<Histogram style="width: 2em; height: 2em;border-color: white;" color="white" />
											</el-col>
											<el-col :span="16" class="col-right">
												<div style="font-size: 60px; font-weight:bold; color: #606266">
													403
												</div>
											</el-col>
										</el-row>
									</div>
								</el-col>
								<el-col :span="4">
									<div class="grid-content ep-bg-purple">
										<el-row>
											<el-col :span="8" class="col-left"
												style="border-color: #926BDD;background-color: #926BDD;">
												<Share style="width: 2em; height: 2em;border-color: white;" color="white" />
											</el-col>
											<el-col :span="16" class="col-right">
												<div style="font-size: 60px; font-weight:bold; color: #606266">
													503
												</div>
											</el-col>
										</el-row>
									</div>
								</el-col>
								<el-col :span="4">
									<div class="grid-content ep-bg-purple">
										<el-row>
											<el-col :span="8" class="col-left"
												style="border-color: #DD4E2A;background-color: #DD4E2A;">
												<Tools style="width: 2em; height: 2em;border-color: white;" color="white" />
											</el-col>
											<el-col :span="16" class="col-right">
												<div style="font-size: 60px; font-weight:bold; color: #606266">
													603
												</div>
											</el-col>
										</el-row>
									</div>
								</el-col>
							</el-row>
		
							<!-- 主体第一部分： 饼状图， 柱形图 -->
							<div>
								<el-row :gutter="20" style="margin-top: 20px;">
									<!-- 视图一： 当日新增体检用户 -->
									<el-col :span="8">
										<div class="col-mid" id="pie">
										</div>
									</el-col>
									<!-- 视图二： 当日新增预约用户-->
									<el-col :span="8">
										<div class="col-mid" id="bar">
										</div>
									</el-col>
									<!-- 视图三： 当日新增预约用户-->
									<el-col :span="8">
										<div class="col-mid" id="radar">
										</div>
									</el-col>
								</el-row>
							</div>
							<!-- 主体第二部分： 面积图 -->
							<div style="margin-top: 20px;" class="col-bottom" id="area">
							</div>
						</el-tab-pane>
						<el-tab-pane label="Config">Config</el-tab-pane>
						<el-tab-pane label="Role">Role</el-tab-pane>
						<el-tab-pane label="Task">Task</el-tab-pane>
					</el-tabs>
				</div>
	</body>
	<script>
			const App = {
				data() {
					return {
	
					}
				},
				methods: {}
			};
			const app = Vue.createApp(App);
			app.use(ElementPlus);
			app.component("Avatar", ElementPlusIconsVue.Avatar);
			app.component("Tools", ElementPlusIconsVue.Tools);
			app.component("Share", ElementPlusIconsVue.Share);
			app.component("Histogram", ElementPlusIconsVue.Histogram);
			app.component("Grid", ElementPlusIconsVue.Grid);
			app.component("Promotion", ElementPlusIconsVue.Promotion);
			app.mount("#app");
		</script>
		<script src="js/echarts.min.js"></script>
		<script src="js/pie.js"></script>
		<script src="js/zhexian.js"></script>
		<script src="js/zhuzhuangtu.js"></script>
		<script src="js/leidatu.js"></script>
		
			
</html>